<script setup>
import icon5 from "../../../assets/images/icon5.png";
import icon6 from "../../../assets/images/icon6.png";
import icon7 from "../../../assets/images/icon7.png";
import icon8 from "../../../assets/images/icon8.png";
import icon9 from "../../../assets/images/icon9.png";
import icon10 from "../../../assets/images/icon10.png";
import Pie3D from "../../../components/pie3D.vue";
import BasicsBar from "../../../components/basicsBar.vue";
import BasicsPie from "../../../components/basicsPie.vue";

const data = [
  {
    name: "在线资源检测处置次数",
    value: "327",
    unit: "次",
    url: icon5,
  },
  {
    name: "在线资源智能评估次数",
    value: "312545",
    unit: "次",
    url: icon6,
  },
  {
    name: "已评估优质资源总量",
    value: "509954",
    unit: "个",
    url: icon7,
  },
  {
    name: "在线资源优化更新数量",
    value: "289421",
    unit: "个",
    url: icon8,
  },
  {
    name: "在线资源审查下架数量",
    value: "30091",
    unit: "个",
    url: icon9,
  },
  {
    name: "平台违规行为处置次数",
    value: "0",
    unit: "个",
    url: icon10,
  },
];

const pieData1 = [
  {
    name: "视频",
    value: 193608862,
  },
  {
    name: "音频",
    value: 7263230,
  },
  {
    name: "图文",
    value: 189567409,
  },
  {
    name: "图片",
    value: 30114552,
  },
];
const pieData2 = [
  {
    name: "科普",
    value: 11717745,
  },
  {
    name: "文艺",
    value: 9466072,
  },
  {
    name: "体育",
    value: 1175572,
  },
  {
    name: "读写",
    value: 13513659,
  },
];

const pieData3 = [
  { value: 4196, name: "本科" },
  { value: 11520, name: "高职" },
  { value: 0, name: "研究生" },
];

const pieTitle = [
  {
    text: "15716",
    x: "center",
    y: "46%",
    textStyle: {
      fontFamily: "Helvetica-Bold",
      fontWeight: "bold",
      fontSize: 16,
      color: "#C9E9F8",
    },
  },
];

const series = [
  {
    type: "bar",
    name: "本科",
    data: [3186, 1010],
    barWidth: 10,
  },
  {
    type: "bar",
    name: "高职",
    data: [6786, 4734],
    barWidth: 10,
  },
  {
    type: "bar",
    name: "研究生",
    data: [0, 0],
    barWidth: 10,
  },
];
</script>

<template>
  <div class="right">
    <div class="title bg1"></div>
    <div class="box1">
      <div class="box1-c1">
        <div class="box1-c1-t">
          <div class="box1-c1-t-c">
            <div>
              <span class="text-gradual-blue-18 mr-1">22018</span>
              <span class="text-opacity-c9-55-12">人</span>
            </div>
            <div class="box1-c1-t-c-l"></div>
            <div class="text-c9-65-12">今日访问人数</div>
          </div>
          <div class="box1-c1-t-c">
            <div>
              <span class="text-gradual-blue-18 mr-1">364776</span>
              <span class="text-opacity-c9-55-12">人</span>
            </div>
            <div class="box1-c1-t-c-l"></div>
            <div class="text-c9-65-12">本月访问人数</div>
          </div>
          <div class="box1-c1-t-c">
            <div>
              <span class="text-gradual-blue-18 mr-1">28375</span>
              <span class="text-opacity-c9-55-12">人次</span>
            </div>
            <div class="box1-c1-t-c-l"></div>
            <div class="text-c9-65-12">最高日访问人数</div>
          </div>
          <div class="box1-c1-t-c">
            <div class="text-c9-55-14">2024年12月10日</div>
            <div class="box1-c1-t-c-l"></div>
            <div class="text-c9-65-12">最高访问日期</div>
          </div>
        </div>
        <div class="box1-c1-b">
          <div class="box1-c1-b-c">
            <img src="../../../assets/images/icon1.png" class="box1-c1-b-c-i" />
            <div class="box1-c1-b-c-c">
              <div class="text-c9-65-12">平台教师总数</div>
              <div class="box1-c1-b-c-c-l"></div>
              <div>
                <span class="text-gradual-blue-18 mr-1">53976</span>
                <span class="text-opacity-c9-55-12">人</span>
              </div>
            </div>
          </div>
          <div class="box1-c1-b-c">
            <img src="../../../assets/images/icon2.png" class="box1-c1-b-c-i" />
            <div class="box1-c1-b-c-c">
              <div class="text-c9-65-12">平台学生数</div>
              <div class="box1-c1-b-c-c-l"></div>
              <div>
                <span class="text-gradual-blue-18 mr-1">2890813</span>
                <span class="text-opacity-c9-55-12">人</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="box1-c2">
        <div class="text-c9-75-14 pl-3 leading-14px">资源应用情况 (人次)</div>
        <div class="box1-c2-c1">
          <div class="text-c9-55-14">在线课堂资源观看总人次</div>
          <div class="flex">
            <span class="text-gradual-yellow-18 mr-1">420552954</span>
            <span class="text-opacity-c9-55-12">人次</span>
          </div>
        </div>
        <div class="box1-c2-c2">
          <div class="box1-c2-c2-c">
            <div class="box1-c2-c2-c-c">
              <div class="text-c9-65-12">本科</div>
              <div>
                <span class="text-gray-16 mr-2px">113549297</span>
                <span class="text-opacity-c9-55-12">人</span>
              </div>
            </div>
            <div class="box1-c2-c2-c-c">
              <div class="text-c9-65-12">高职</div>
              <div>
                <span class="text-gray-16 mr-2px">307003657</span>
                <span class="text-opacity-c9-55-12">人</span>
              </div>
            </div>
            <div class="box1-c2-c2-c-c">
              <div class="text-c9-65-12">研究生</div>
              <div>
                <span class="text-gray-16 mr-2px">0</span>
                <span class="text-opacity-c9-55-12">人</span>
              </div>
            </div>
          </div>
          <div class="line-col"></div>
          <div class="flex-1">
            <Pie3D :data="pieData1"></Pie3D>
          </div>
        </div>
        <div class="line-row"></div>
        <div class="box1-c2-c1">
          <div class="text-c9-55-14">课后辅导资源观看总人次</div>
          <div class="flex">
            <span class="text-gradual-yellow-18 mr-1">35873048</span>
            <span class="text-opacity-c9-55-12">人次</span>
          </div>
        </div>
        <div class="box1-c2-c2">
          <div class="box1-c2-c2-c">
            <div class="box1-c2-c2-c-c">
              <div class="text-c9-65-12">本科</div>
              <div>
                <span class="text-gray-16 mr-2px">9685722</span>
                <span class="text-opacity-c9-55-12">人</span>
              </div>
            </div>
            <div class="box1-c2-c2-c-c">
              <div class="text-c9-65-12">高职</div>
              <div>
                <span class="text-gray-16 mr-2px">26487326</span>
                <span class="text-opacity-c9-55-12">人</span>
              </div>
            </div>
            <div class="box1-c2-c2-c-c">
              <div class="text-c9-65-12">研究生</div>
              <div>
                <span class="text-gray-16 mr-2px">0</span>
                <span class="text-opacity-c9-55-12">人</span>
              </div>
            </div>
          </div>
          <div class="line-col"></div>
          <div class="flex-1">
            <Pie3D :data="pieData2"></Pie3D>
          </div>
        </div>
      </div>
      <div class="box1-c3">
        <div class="text-c9-75-14 absolute">直播课应用情况 (人次)</div>
        <div class="box1-c3-c">
          <div class="flex-1">
            <BasicsPie
              :color="['#2D80FF', '#8CC6FA', '#FEDE73']"
              :data="pieData3"
              :legend="{ show: false }"
              :title="pieTitle"
            ></BasicsPie>
          </div>
          <div class="text-c9-65-12">直播课堂观看人次</div>
        </div>
        <div class="flex-1">
          <BasicsBar
            :xData="['理论建设', '案例实训']"
            :series="series"
            :grid="{ left: 45, top: 28 }"
            :color="['#2D80FF', '#8CC6FA', '#FEDE73']"
          ></BasicsBar>
        </div>
      </div>
      <div class="box1-c4">
        <div class="text-c9-75-14 leading-14px">各级直播活动应用情况 (次)</div>
        <div class="box1-c4-c">
          <div class="box1-c4-c-c">
            <div class="text-c9-65-12">市教委直播活动次数</div>
            <div class="leading-18px">
              <span class="text-gradual-blue-18 mr-1">9</span>
              <span class="text-opacity-c9-55-12">次</span>
            </div>
            <div class="box1-c4-c-c-l"></div>
            <div class="text-opacity-c9-55-12">观看人次:15716人次</div>
          </div>
          <div class="box1-c4-c-c">
            <div class="text-c9-65-12">区教委直播活动次数</div>
            <div class="leading-18px">
              <span class="text-gradual-blue-18 mr-1">0</span>
              <span class="text-opacity-c9-55-12">次</span>
            </div>
            <div class="box1-c4-c-c-l"></div>
            <div class="text-opacity-c9-55-12">观看人次:0人次</div>
          </div>
          <div class="box1-c4-c-c">
            <div class="text-c9-65-12">学校直播活动次数</div>
            <div class="leading-18px">
              <span class="text-gradual-blue-18 mr-1">0</span>
              <span class="text-opacity-c9-55-12">次</span>
            </div>
            <div class="box1-c4-c-c-l"></div>
            <div class="text-opacity-c9-55-12">观看人次:0人次</div>
          </div>
        </div>
      </div>
      <div class="box1-c5">
        <div class="text-c9-75-14 leading-14px">
          教师在线备课资源使用情况 (次)
        </div>
        <div class="box1-c5-c">
          <div class="box1-c5-c-c">
            <img src="../../../assets/images/icon3.png" class="box1-c5-c-c-i" />
            <div class="box1-c5-c-c-c">
              <div class="text-c9-65-12 leading-3">
                教师在线备课资源共享查阅次数
              </div>
              <div class="box1-c5-c-c-c-l"></div>
              <div class="flex leading-18px">
                <span class="text-gradual-blue-18 mr-1">11160</span>
                <span class="text-opacity-c9-55-12">次</span>
              </div>
            </div>
          </div>
          <div class="box1-c5-c-c">
            <img src="../../../assets/images/icon4.png" class="box1-c5-c-c-i" />
            <div class="box1-c5-c-c-c">
              <div class="text-c9-65-12 leading-3">
                教师在线备课资源下载次数
              </div>
              <div class="box1-c5-c-c-c-l"></div>
              <div class="flex leading-18px">
                <span class="text-gradual-blue-18 mr-1">6458</span>
                <span class="text-opacity-c9-55-12">次</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="title bg2"></div>
    <div class="box2">
      <div class="box2-c" v-for="(item, index) in data" :key="index">
        <img :src="item.url" class="box2-c-i" />
        <div class="box2-c-c">
          <div class="text-c9-75-14">{{ item.name }}</div>
          <div>
            <span class="text-gray-18 mr-1">{{ item.value }}</span>
            <sapn class="text-opacity-c9-55-12">{{ item.unit }}</sapn>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.right {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .title {
    width: 100%;
    height: 2.75rem;
  }
  .bg1 {
    background: url(../../../assets/images/title3.png) no-repeat;
    background-size: 100% 100%;
  }
  .bg2 {
    background: url(../../../assets/images/title4.png) no-repeat;
    background-size: 100% 100%;
  }

  .box1 {
    width: 100%;
    height: 43.5rem;
    padding: 0.5rem 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    .box1-c1 {
      width: 100%;
      height: 6.625rem;
      background: rgba(9, 54, 100, 0.3);
      display: flex;
      flex-direction: column;
      gap: 0.625rem;
      .box1-c1-t {
        display: flex;
        justify-content: center;
        align-items: end;
        .box1-c1-t-c {
          flex: 1;
          display: flex;
          flex-direction: column;
          align-items: center;
          .box1-c1-t-c-l {
            width: 4.0625rem;
            border: 1px solid;
            border-image: linear-gradient(
                270deg,
                rgba(0, 178, 238, 0),
                rgba(0, 178, 238, 0.7),
                rgba(0, 178, 238, 0)
              )
              1 1;
          }
        }
      }
      .box1-c1-b {
        display: flex;
        justify-content: center;
        .box1-c1-b-c {
          padding-left: 2rem;
          flex: 1;
          display: flex;
          align-items: center;
          gap: 0.375rem;
          .box1-c1-b-c-i {
            width: 2.875rem;
            height: 2.375rem;
          }
          .box1-c1-b-c-c {
            display: flex;
            flex-direction: column;
            .box1-c1-b-c-c-l {
              width: 110px;
              border: 1px solid;
              border-image: linear-gradient(
                  90deg,
                  rgba(201, 233, 248, 0.4),
                  rgba(201, 233, 248, 0)
                )
                1 1;
            }
          }
        }
      }
    }
    .box1-c2 {
      width: 100%;
      height: 15rem;
      background: rgba(9, 54, 100, 0.3);
      padding: 0.625rem 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 0.5rem;
      .box1-c2-c1 {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 0.75rem;
        line-height: 1.125rem;
      }
      .box1-c2-c2 {
        flex: 1;
        display: flex;
        justify-content: space-between;
        gap: 0.75rem;
        padding: 0 0.75rem;
        .box1-c2-c2-c {
          width: 8.5625rem;
          height: 100%;
          display: flex;
          flex-direction: column;
          gap: 0.25rem;
          .box1-c2-c2-c-c {
            width: 100%;
            height: 1.25rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: url(../../../assets/images/subTitle.png) no-repeat;
            background-size: 5.75rem 100%;
            padding-left: 0.5rem;
          }
        }
      }
    }
    .box1-c3 {
      flex: 1;
      display: flex;
      justify-content: space-between;
      padding: 0 0.75rem 0.25rem;
      position: relative;
      .box1-c3-c {
        width: auto;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
      }
    }
    .box1-c4 {
      width: 100%;
      height: 6.375rem;
      background: rgba(9, 54, 100, 0.3);
      padding: 0.625rem 0.75rem;
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
      .box1-c4-c {
        flex: 1;
        display: flex;
        align-items: center;
        gap: 1.5625rem;
        .box1-c4-c-c {
          flex: 1;
          display: flex;
          flex-direction: column;
          gap: 0.25rem;
          .box1-c4-c-c-l {
            width: 6.875rem;
            border: 1px solid;
            border-image: linear-gradient(
                90deg,
                rgba(201, 233, 248, 0.4),
                rgba(201, 233, 248, 0)
              )
              1 1;
          }
        }
      }
    }
    .box1-c5 {
      width: 100%;
      height: 5rem;
      background: rgba(9, 54, 100, 0.3);
      padding: 0.625rem 0.75rem;
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
      .box1-c5-c {
        flex: 1;
        display: flex;
        justify-content: space-between;
        align-items: center;
        // gap: 0.5rem;
        .box1-c5-c-c {
          // flex: 1;
          display: flex;
          align-items: center;
          gap: 0.375rem;

          .box1-c5-c-c-i {
            width: 2.875rem;
            height: 2.375rem;
          }
          .box1-c5-c-c-c {
            display: flex;
            flex-direction: column;
            justify-content: center;
            gap: 0.25rem;
            .box1-c5-c-c-c-l {
              width: 6.875rem;
              border: 1px solid;
              border-image: linear-gradient(
                  90deg,
                  rgba(201, 233, 248, 0.4),
                  rgba(201, 233, 248, 0)
                )
                1 1;
            }
          }
        }
      }
    }
  }

  .box2 {
    flex: 1;
    width: 100%;
    padding: 0.5rem 0 0 0.75rem;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
    .box2-c {
      width: 48%;
      height: 30%;
      background: linear-gradient(
        90deg,
        rgba(9, 54, 100, 0.8) 0%,
        rgba(9, 54, 100, 0) 100%
      );
      padding-left: 8px;
      display: flex;
      align-items: center;
      gap: 0.25rem;
      .box2-c-i {
        width: 2.5rem;
        height: 2.375rem;
      }
      .box2-c-c {
        display: flex;
        flex-direction: column;
      }
    }
  }
}
</style>
